    <template>
  <div>
    <el-tree
      :data="data"
      show-checkbox
      node-key="deptId"
      @node-click="handleNodeClick"
      :default-expanded-keys="[2, 3]"
      :default-checked-keys="[5]"
      :props="defaultProps"
      ref="tree"
    >
    </el-tree>
    <div class="buttons">
      <el-button @click="getCheckedKeys">通过 key 获取</el-button>
    </div>
  </div>
</template>
    
    <script>
import { getdept } from "@/api/dept";
export default {
  data() {
    return {
      data: [],

      defaultProps: {
        children: "children",
        label: "deptName"
      }
    };
  },
  //网页加载事件
  mounted: function() {
    this.querydept();
  },

  methods: {
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys());
    },
    handleNodeClick(data) {
      console.log(data);
    },
    querydept() {
      getdept().then(response => {
        console.log(response.data);
        this.data = response.data;
      });
    }
  }
};
</script>
    
    <style lang="scss" scoped>
</style>